<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link th:replace="fragments/dependency :: list-css">

<title>优铺Admin</title>
</head>

<body class="nav-md">
	<div class="container body">
		<div class="main_container">
			<!-- Left Menu -->
			<div th:replace="fragments/leftMenu :: leftMenu"></div>

			<!-- top navigation -->
			<div th:replace="fragments/header :: header"></div>

			<!-- page content -->
			<div class="right_col" role="main">

				<div class="ln_solid"></div>
				<div class="col-md-12 col-sm-12 col-xs-12">
					<div class="x_panel">
						<div class="x_title">
							<h2>奖金发放列表</h2>
							<ul class="nav navbar-right panel_toolbox">
								<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
							</ul>
							<div class="clearfix"></div>
						</div>
						<!-- 按钮区域 -->
						<div class="x_content">
							<div class="btn-toolbar" role="toolbar">
								<div class="btn-group btn-group-sm" role="group">
									<button type="button" class="btn" th:classappend="${param.status == null || #strings.equals(param.status,'待发放') ? 'btn-primary' : 'btn-default'}" name="status">待发放</button>
									<button type="button" class="btn" th:classappend="${#strings.equals(param.status,'已发放') ? 'btn-primary' : 'btn-default'}" name="status">已发放</button>
									<input type="hidden" name="status" th:value="${param.status}">
								</div>
							</div>
						</div>
						<!-- 搜索区域 -->
						<div class="x_content">
							<div class="form-inline">
								<div class="form-group">
									<label for="ex4">区域：</label> <select name="area" th:selected="${param.area}" class="form-control">
										<option value>请选择</option>
										<option th:each="area : ${areas}" th:text="${area.name}" th:value="${area.id}" th:selected="${param.area != null && param.area[0].equals(area.id + '')}" />
									</select>
								</div>
								<div class="form-group">
									<label for="ex4">商圈：</label> <select name="businessArea" th:selected="${param.businessArea}" class="form-control">
										<option value>请选择</option>
									</select>
								</div>
								<div class="form-group">
									<label for="ex4">环线：</label> <select name="huanXian" th:selected="${param.huanxian}" class="form-control">
										<option value>请选择</option>
										<option th:each="huanxian : ${T(com.up.upzl.biz.domain.PaiDianRecord.HuanXian).values()}" th:text="${huanxian}" th:value="${huanxian.name()}" th:selected="${param.huanXian != null && huanxian.name().equals(param.huanXian[0])}" />
									</select>
								</div>
							</div>
						</div>
						<div class="x_content">
							<div class="form-inline">
								<div class="form-group">
									<label for="ex4">拍店人：</label> <input name="phone" th:value="${param.phone}" class="form-control" placeholder="请输入手机号">
								</div>
								<div class="form-group">
									<label for="ex4">微信ID：</label> <input name="wechatId" th:value="${param.wechatId}" class="form-control" placeholder="">
								</div>
								<div class="form-group">
									<label for="ex4"> 审核日期：</label>
									<div class='input-group date' id='myDatepicker0'>
										<input type='text' class="form-control" name="dateBegin" th:value="${#strings.isEmpty(param.dateBegin)}?'': ${param.dateBegin[0]}" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
								</div>
								

								<div class="form-group">
									<label for="ex4">-</label>
									<div class='input-group date' id='myDatepicker1'>
										<input type='text' class="form-control" name="dateEnd" th:value="${#strings.isEmpty(param.dateEnd)}?'': ${param.dateEnd[0]}" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
								</div>
							</div>
						</div>
						<div class="x_title">
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<button type="button" class="btn btn-round btn-success hide" name="query" permission-rel="/paiDianRecord/list">查询</button>
							<button type="button" class="btn btn-round btn-success hide" name="clear" permission-rel="/paiDianRecord/list">重置</button>
						</div>
						<div class="x_title">
							<div class="clearfix"></div>
						</div>
						<div class="text-right">
							<button type="button" th:if="${param.status == null || #strings.equals(param.status,'待发放')}" class="btn btn-round btn-success hide" name="convertData" permission-rel="/jiangjin/fafang">发放</button>
							<span class="label label-info" th:text="'总数：'+${pageList.totalElements}"></span>
						</div>
						<div class="x_content">
							<div class="table-responsive">
								<table class="table table-striped jambo_table bulk_action">
									<thead>
										<tr class="headings">
											<th class="column-title"><input type="checkbox" name="checkAll" />全选</th>
											<th class="column-title">编号</th>
											<th class="column-title">微信ID</th>
											<th class="column-title">拍店人</th>
											<th class="column-title">区域</th>
											<th class="column-title">商圈</th>
											<th class="column-title">环线</th>
											<th class="column-title">坐标</th>
											<th class="column-title">审核日期</th>
											<th class="column-title">基础奖金</th>
											<th class="column-title">额外奖金</th>
											<th class="column-title no-link last" th:if="${param.status == null || #strings.equals(param.status,'待发放')}"><span class="nobr">操作</span></th>
										</tr>
									</thead>
									<tbody>
										<tr class="even pointer" th:each="entity : ${pageList}">
											<td><input type="checkbox" name="shopId" th:value="${entity.id}" th:phone="${entity.phone}" /></td>
											<td th:text="${entity.id}"></td>
											<td th:text="${entity.wechatId}"></td>
											<td th:text="${entity.phone}"></td>
											<td th:text="${entity.area == null ? '' : entity.area.name}"></td>
											<td th:text="${entity.businessArea == null ? '' : entity.businessArea.name}"></td>
											<td th:text="${entity.huanXian}"></td>
											<td th:text="${entity.locationX + ',' + entity.locationY}"></td>
											<td th:text="${#dates.format(entity.updateTime, 'yyyy/MM/dd')}"></td>
											<td th:if="${param.status == null || #strings.equals(param.status,'待发放')}" th:text="${entity.basicJJ}"></td>
											<td th:if="${param.status == null || #strings.equals(param.status,'待发放')}" th:text="${entity.extJiang}"></td>
											<td th:if="${param.status != null && #strings.equals(param.status,'已发放')}" th:text="${entity.basicJiang}"></td>
											<td th:if="${param.status != null && #strings.equals(param.status,'已发放')}" th:text="${entity.extJiang}"></td>
											<td th:if="${param.status == null || #strings.equals(param.status,'待发放')}"><a href="javascript:;" class="btn btn-primary btn-xs hide" permission-rel="/jiangjin/fafang" th:onclick="'fafang(' + ${entity.id} + ', ' + ${entity.phone} + ')'"><i class="fa fa-folder"></i> 发放 </a></td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="x_title">
							<div class="clearfix"></div>
						</div>
						<div class="x_content"></div>
					</div>
				</div>
				<div th:replace="fragments/page :: page"></div>
			</div>

			<!-- footer content -->
			<div th:replace="fragments/footer :: footer"></div>
		</div>
	</div>

	<div id="fafang" style="display: none;">
		<div style="width: 244px; margin: 0px auto;">
			<div style="margin-top: 7px;">拍店人：<span id="c0"></span></div>
			<div style="margin-top: 7px;">基础奖金：<span id="c1"></span>元</div>
			<div style="margin-top: 7px;">额外奖金：<span id="c2"></span>元</div>
			<div style="margin-top: 7px;">总计发放：<span id="c3"></span>元</div>
			<div style="margin-top: 17px;">
				<button class="btn btn-primary" style="width: 100px;" type="button" onclick="fafangS()">确定</button>
				<button class="btn btn-primary" style="width: 100px;" type="button" onclick="adminLayer.close(index)">取消</button>
			</div>
		</div>
	</div>

	<div th:replace="fragments/dependency :: list-js"></div>

	<script src="/dic/area.js"></script>

	<script type="text/javascript">
		var idsFlag = null;
		function fafang(id, phone) {
			var indexT = adminLayer.loading();
			$.get('/jiangjin/compute?ids=' + id, function(data) {
				$("#c0").text(phone);
				$("#c1").text(data.basic);
				$("#c2").text(data.ext);
				$("#c3").text(data.total);
				adminLayer.close(indexT);
				list.update();
				idsFlag = [id];
			});
		}
		
		function fafangS() {
			var checkedIds = [];
			if(idsFlag) {
				checkedIds = idsFlag;
			} else {
				$('input[name=shopId]:checked').each(function(index, shopId) {
					checkedIds.push($(shopId).attr('value'));
				})
			}
			var indexT = adminLayer.loading();
			$.post('/jiangjin/fafang?ids=' + checkedIds.join(','), function(data) {
				adminLayer.close(indexT);
				layer.confirm('发放成功', {
					btn : [ '确定' ]
				}, function() {
					window.location.reload();
				});
			});
		}
		//开始时间控件初始化
		$('#myDatepicker0').datetimepicker({
			ignoreReadonly : true,
			allowInputToggle : true,
			format : 'YYYY/MM/DD'
		});
		//结束时间控件初始化
		$('#myDatepicker1').datetimepicker({
			ignoreReadonly : true,
			allowInputToggle : true,
			format : 'YYYY/MM/DD'
		});
		
		$('input[type="checkbox"]').iCheck({
			checkboxClass : 'icheckbox_flat-green'
		});
		
		$('input[name=checkAll]').on('ifChecked', function() {
			$('input[name=shopId]').iCheck('check');
		});
		
		$('input[name=checkAll]').on('ifUnchecked', function() {
			$('input[name=shopId]').iCheck('uncheck');
		});
		
		$('button[name=convertData]').click(function() {
			var checkedIds = [];
			$('input[name=shopId]:checked').each(function(index, shopId) {
				checkedIds.push($(shopId).attr('value'));
			})
			if (checkedIds.length == 0) {
				adminLayer.msg('请选择要发放的数据');
			} else {
				var flag = true;
				var checkedPhones = [];
				$('input[name=shopId]:checked').each(function(index, shopId) {
					var checkedPhone =  $(shopId).attr('phone');
					if(checkedPhones.length > 0 && checkedPhones.indexOf(checkedPhone) == -1) {
						adminLayer.msg('批量发放必须选择同一个拍店人，请您重新选择');
						flag = false;
						return;
					}
					checkedPhones.push(checkedPhone);
				})
				if(flag) {
					var indexT = adminLayer.loading();
					$.get('/jiangjin/compute?ids=' + checkedIds.join(','), function(data) {
						$("#c0").text(checkedPhones[0]);
						$("#c1").text(data.basic);
						$("#c2").text(data.ext);
						$("#c3").text(data.total);
						adminLayer.close(indexT);
						list.update();
						idsFlag = null;
					});
				}
			}
		});
		
		var index;
		var list = {
			baseUrl : "jiangjin",
			area : [ '877px', '500px' ],
			init : function() {
				$('button[name=add]').bind('click', list.add);
				$('button[name=query]').bind('click', function() {
					window.location.href = list.query();
				});
				$('button[name=clear]').bind('click', function() {
					list.clear();
				});
				$('button[name=status]').bind('click', function(e) {
					$('input[name=status][type=hidden]').val($(this).text());
					window.location.href = list.queryClear();
				});
				$('button[name=isDeleted]').bind('click', function(e) {
					$('input[name=status][type=hidden]').val(null);
					window.location.href = list.queryClear();
				});
			},
			update : function() {
				index = adminLayer.html({
					title : '警告',
					content : $("#fafang").html(),
					area : [ '377px', '210px' ]
				});
			},
			query : function() {
				pageFoot.searchUrl = '/' + list.baseUrl + '/list';
				var status = $("input[name=status]").val();
				var area = $("select[name=area]").val();
				var businessArea = $('select[name=businessArea]').val();
				var huanXian = $('select[name=huanXian]').val();
				var phone = $("input[name=phone]").val();
				var wechatId = $("input[name=wechatId]").val();
				var dateBegin = $("input[name=dateBegin]").val();
				var dateEnd = $("input[name=dateEnd]").val();
				return pageFoot.addParam("status", status).addParam("area", area).addParam("businessArea", businessArea).addParam("huanXian", huanXian).addParam("phone", phone).addParam("wechatId", wechatId).addParam("dateBegin", dateBegin).addParam("dateEnd", dateEnd).searchUrl;
			},
			clear : function() {
				$("select[name=area]").val('');
				$("select[name=businessArea]").val('');
				$("select[name=huanXian]").val('');
				$("input[name=phone]").val('');
				$("input[name=wechatId]").val('');
				$("input[name=dateBegin]").val('');
				$("input[name=dateEnd]").val('');
			},
			queryClear : function() {
				pageFoot.searchUrl = '/' + list.baseUrl + '/list';
				var status = $('input[name=status][type=hidden]').val();
				
				return pageFoot.addParam("status", status).searchUrl;
			}
		}
		pageFoot.getCurrentUrl = function() {
			return list.query();
		}
		pageFoot.init();
		list.init();
		
		if ('[[${param.area}]]') {
			$.getJSON('/businessArea/getByAreaId?area=' + '[[${param.area}]]', function(data) {
				var option = '<option value>请选择</option>';
				if (data.length > 0) {
					$.each(data, function(index, temp) {
						option += "<option value='" + temp.id + "'>" + temp.name + "</option>"
					});
				}
				$("select[name=businessArea]").html(option);
				if ('[[${param.businessArea}]]') {
					$("select[name=businessArea]").val('[[${param.businessArea}]]');
				}
			});
		}

		$("select[name='area']").change(function() {
			var area = $(this).val();
			if ($(this).val()) {
				$.getJSON('/businessArea/getByAreaId?area=' + area, function(data) {
					var option = '<option value>请选择</option>';
					if (data.length > 0) {
						$.each(data, function(index, temp) {
							option += "<option value='" + temp.id + "'>" + temp.name + "</option>"
						});
					}
					$("select[name=businessArea]").html(option);
				});
			} else {
				$("select[name=businessArea]").html('<option value>请选择</option>');
			}
		});
	</script>
</body>
</html>
